<template>
	<view class="ccontainer">
		<uni-nav-bar :fixed="true" class="clq_uniNavBar" title="欢迎登录" color="#333" background-color="#ffffff">
			<block slot="left">
				<image @tap="navBarBack" class="navBarBack" src="/static/clq-image/fork.png" mode="scaleToFill"></image>
			</block>
		</uni-nav-bar>
		<view class="con-con cflex cflex_col cflex_items">
			<image class="logo" src="/static/clq-image/logo.png" mode=""></image>
			<view class="form-item cflex cflex_row cflex_between cflex_items">
				<image class="left-icon" src="/static/clq-image/login-icon1.png" mode=""></image>
				<input class="inputClass cflex cflex_1" type="text" v-model="form.username" data-name="username" @blur="inputText"
				 placeholder="手机号/账号/邮箱" />
			</view>
			<view class="form-item cflex cflex_row cflex_between cflex_items" style="margin: 49rpx 0 21rpx 0;">
				<image class="left-icon" src="/static/clq-image/login-icon2.png" mode=""></image>
				<input class="inputClass cflex cflex_1" :password="inputType" v-model="form.password" data-name="password" @blur="inputText"
				 placeholder="请输入密码" />
				<image v-if="inputType ==false" @click="inputTypeChange" data-type="0" class="eye1" src="/static/clq-image/eye_1.png"
				 mode=""></image>
				<image v-else class="eye2" @click="inputTypeChange" data-type="1" src="/static/clq-image/eye_2.png" mode=""></image>
			</view>
			<view class="rule cflex cflex_row cflex_items">
				<image v-if="comfirmStatus == 0" @click="getComfirm" :data-comfirmStatus="1" src="/static/clq-image/login_check.png"
				 mode="scaleToFill"></image>
				<image v-else @click="getComfirm" :data-comfirmStatus="0" src="/static/clq-image/login_checked.png" mode="scaleToFill"></image>
				<view>阅读并同意<span @click="turnUserAgreement">用户协议</span>和<span @click="turnPrivacyPolicy">隐私政策</span></view>
			</view>
			<view class="loginBtn cflex cflex_row cflex_center cflex_items" @click="Login()">登录</view>
		</view>
	</view>
</template>

<script>
	import {
		ajax
	} from '../../ajax.js';
	import uniIcons from '../../components/uni-icons.vue';
	import uniNavBar from '../../components/uni-nav-bar.vue';
	export default {
		components: {
			uniIcons,
			uniNavBar
		},
		data() {
			return {
				inputType: true,
				comfirmStatus: 0,
				form: {
					username: '',
					password: ''
				}
			};
		},
		onLoad: function(opt) {
			let that = this;
		},
		methods: {
			Login(){
				let that = this
				if(that.comfirmStatus == 0){
					uni.showToast({
						title: '请同意用户协议和隐私政策',
						duration: 1500,
						icon: 'none'
					});
				}else{
					ajax({
						url: 'login/login',
						data: {
							username:that.form.username,
							password:that.form.password
						},
						header: {
							'content-type': 'application/json' //自定义请求头信息
						},
						method: 'POST',
						success: function(res) {
							uni.hideLoading()
							let result = res.data.data
							console.log('result', result);
							if (res.data.code == 1) {
								uni.setStorageSync('token',result.token)
								uni.setStorageSync('user_id',result.user_id)
								uni.setStorageSync('name',result.name)
								uni.setStorageSync('class',result.class)
								uni.showToast({
									title: '登录成功',
									duration: 1500,
									icon: 'none'
								});
								uni.navigateTo({
									url:'/pages/index/index'
								})
							}
						},
						error: function() {
							uni.showToast({
								title: res.data.msg,
								duration: 1500,
								icon: 'none'
							});
						}
					});
				}
			},
			turnUserAgreement() {
				uni.navigateTo({
					url: "/pages/userAgreement/userAgreement"
				})
			},
			turnPrivacyPolicy() {
				uni.navigateTo({
					url: "/pages/privacyPolicy/privacyPolicy"
				})
			},
			getComfirm(e) {
				console.log('e', e)
				this.comfirmStatus = e.currentTarget.dataset.comfirmstatus
			},
			inputTypeChange(e) {
				let type = e.currentTarget.dataset.type
				if (type == 0) {
					this.inputType = true
				} else {
					this.inputType = false
				}
			},
			// 值
			inputText(e) {
				let value = e.detail.value,
					key = e.currentTarget.dataset.name,
					form = this.form;
				form[key] = value;
				this.form = form;
				console.log('输入form', this.form);
			},
			inputText(e) {
				let value = e.detail.value,
					key = e.currentTarget.dataset.name
				this.form[key] = value
				console.log('form', this.form)
			},
			//返回
			navBarBack() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	};
</script>

<style>
	.navBarBack {
		width: 24rpx;
		height: 24rpx;
		margin-left: 20rpx;
	}

	.con-con {}

	.logo {
		width: 297rpx;
		height: 294rpx;
		margin-bottom: 24rpx;
	}

	.form-item {
		width: 541rpx;
		height: 58rpx;
		border: 1rpx solid #979595;
		border-radius: 10rpx;
	}

	.left-icon {
		width: 30rpx;
		height: 36rpx;
		margin-left: 23rpx;
		margin-right: 45rpx;
	}

	.inputClass {
		width: 100%;
		border: none;
	}

	.eye1 {
		width: 26rpx;
		height: 12rpx;
		margin-right: 19rpx;
	}

	.eye2 {
		width: 28rpx;
		height: 18rpx;
		margin-right: 19rpx;
	}

	.rule {
		width: 541rpx;
		font-size: 24rpx;
		color: #333;
	}

	.rule span {
		color: #FF0B0B;
	}

	.rule image {
		width: 20rpx;
		height: 20rpx;
		margin-right: 18rpx;
	}
	.loginBtn{
		width: 430rpx;
		height: 76rpx;
		background: #ff7427;
		border-radius: 38rpx;
		font-size: 34rpx;
		font-weight: 500;
		color: #ffffff;
		margin-top: 100rpx;
	}
	.loginBtn_color1{
		background: #f75800;
	}
</style>
